<!--
 * @Author: Bobby
 * @Date: 2022-02-15 13:14:17
 * @LastEditTime: 2023-10-13 10:47:58
 * @LastEditors: 甯左龙 1173405584@qq.com
 * @Description:
 * @FilePath: \wms-v2\src\vui\components\VuiModal\index.vue
 * @CIMC-V2
-->
<template>
  <!-- attach="body" -->
  <vue-final-modal
    v-slot="{ params, close }"
    v-bind="$attrs"
    :attach="attach"
    classes="flex justify-center items-center"
    :click-to-close="clickToClose"
    :content-class="'relative flex flex-col max-h-full mx-4  rounded ' + contentClass"
    :drag="true"
    drag-selector=".modal-drag"
    esc-to-close
    @closed="closed"
    @opened="opened"
  >
    <div ref="modalContent" class="select-none" :style="{ width: contentWidth, height: contentHeight }">
      <div v-if="!noTitle" class="modal-drag text-lg pl-3 pt-2 pb-2 pr-8 border-b border-gray-200 cursor-move">
        <slot name="title"></slot>
      </div>
      <div class="flex-grow bg-white overflow-y-auto overflow-x-hidden p-5 h-full w-full" :style="{ maxHeight: 'calc(100% - 90px)' }">
        <slot :params="params"></slot>
      </div>
      <div>
        <slot name="footer"></slot>
      </div>
      <div class="absolute text-white top-0 right-0 flex justify-end items-center" :class="[noTitle ? 'mt-0 mr-0' : 'mt-2 mr-2']">
        <slot name="icons"></slot>
        <button class="hover:text-red-500" @click="close">
          <svg focusable="false" height="24px" viewBox="0 0 24 24" width="24px">
            <path
              d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
              fill="currentColor"
            />
          </svg>
        </button>
      </div>
      <div v-if="resize" ref="resizeModalBtn" class="absolute bottom-0 right-0" :style="{ cursor: 'nw-resize' }">
        <vui-icon :style="{ transform: 'rotate(-45deg)' }" icon="filter-3-line"></vui-icon>
      </div>
    </div>
  </vue-final-modal>
</template>

<script>
  import { defineComponent } from 'vue'
  import { useMousePressed, useElementBounding } from '@vueuse/core'

  export default defineComponent({
    name: 'VuiModal',
    components: {},
    inheritAttrs: false,
    props: {
      clickToClose: {
        type: Boolean,
        default: true,
      },
      attach: {
        type: [String, Boolean],
        default: function () {
          return false
        },
      },
      noTitle: {
        type: Boolean,
        default: function () {
          return false
        },
      },
      contentClass: {
        type: String,
        default: function () {
          return 'bg-white'
        },
      },
      contentWidth: {
        type: String,
        default: '',
      },
      contentHeight: {
        type: String,
        default: '',
      },
      resize: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['opend'],
    data() {
      return {
        mousePressed: {},
      }
    },
    computed: {
      // mousePressed() {
      //   return useMousePressed({ target: this.$refs.resizeBtn })
      // },
    },

    watch: {
      mousePressed: {
        deep: true,
        handler(newVal) {
          if (newVal.pressed) {
            this.addMouseMoveEvent()
          } else {
            this.removeMouseMove()
          }
        },
      },
    },

    crated() {},
    mounted() {
      this.resize && (this.mousePressed = useMousePressed({ target: this.$refs.resizeModalBtn }))
    },
    methods: {
      opened() {
        this.$emit('opend')
      },
      closed() {
        this.$emit('opend')
      },
      addMouseMoveEvent() {
        // 绑定鼠标移动事件
        document.addEventListener('mousemove', this.resizeFunc, true)
      },
      removeMouseMove() {
        document.removeEventListener('mousemove', this.resizeFunc, true)
      },
      resizeFunc(evt) {
        const mouseX = evt.clientX
        const mouseY = evt.clientY
        const modalContent = this.$refs.modalContent
        const { left, top } = useElementBounding(modalContent)
        const width = mouseX - left.value
        const height = mouseY - top.value
        // 设置属性
        width > 800 && (modalContent.style.width = `${width}px`)
        height > 400 && (modalContent.style.height = `${height}px`)
      },
    },
  })
</script>

<style lang="scss" scoped>
  :deep() {
    .vfm__overlay {
      background-color: rgba(0, 0, 0, 0.3);
    }

    .modal-drag {
      border-radius: 2px 2px 0 0;
      background: linear-gradient(90deg, #3a486a 1%, #293450);
      color: #fff;
      min-height: 40px;
    }

    .page-main {
      overflow-x: hidden;
    }
  }
</style>
